<template>
  <!--模型管理组件-->
  <div id="model-manager">
    <!--新增查询-->
    <el-row id="option">
      <el-col :span="2">
        <el-button
          @click="dialogAddFormVisible=true"
          type="primary"
          size="mini">添加新模型
        </el-button>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </el-col>
    </el-row>
    <br/>
    <!--table展示-->
    <el-table border
              :data="tableData.filter(data => !search || data.fileName.toLowerCase().includes(search.toLowerCase()))"
              style="width: 100%;">
      <el-table-column
        label="模型名称"
        prop="fileName">
      </el-table-column>
      <el-table-column
        :formatter="formatType"
        label="模型分类"
        prop="type">
      </el-table-column>
      <el-table-column
        label="模型大小"
        prop="fileSize">
      </el-table-column>
      <el-table-column
        :formatter="formatDate"
        label="创建时间"
        prop="createTime">
      </el-table-column>
      <el-table-column
        label="预览图"
        prop="imageId">
        <template slot-scope="scope">
          <img :src="scope.row.imageId" min-width="70" height="70"/>
        </template>
      </el-table-column>
      <el-table-column
        label="正视图"
        prop="mainViewId">
        <template slot-scope="scope">
          <img :src="scope.row.mainViewId" min-width="70" height="70"/>
        </template>
      </el-table-column>
      <el-table-column
        label="俯视图"
        prop="overViewId">
        <template slot-scope="scope">
          <img :src="scope.row.overViewId" min-width="70" height="70"/>
        </template>
      </el-table-column>
      <el-table-column
        label="侧视图"
        prop="sideViewId">
        <template slot-scope="scope">
          <img :src="scope.row.sideViewId" min-width="70" height="70"/>
        </template>
      </el-table-column>
      <el-table-column
        align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
          <br/>
          <br/>
          <a type="danger" size="small" :href="'/app/v1/model/stl/'+scope.row.id">
            下载模型
          </a>
          <a :href="'/app/v1/model/rar/'+scope.row.id">
            下载切片
          </a>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑界面-->
    <el-dialog title="编辑模型信息" width="30%" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="formData" label-width="80px" :rules="editFormRules" ref="formData">
        <el-form-item label="模型名称" prop="name">
          <el-input v-model="formData.fileName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="模型类型">
          <el-select v-model="formData.type" placeholder="请选择模型类型">
            <el-option v-for="(key,value) in typeMap" :label="key" :value="value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="editConfirm">提交</el-button>
      </div>
    </el-dialog>

    <!--新增对话框-->
    <el-dialog title="添加模型" width="40%" :visible.sync="dialogAddFormVisible">
      <el-form ref="newform" :model="newform" :rules="rules">
        <el-form-item prop="expName" label="">
          <el-input v-model="newform.expName" placeholder="" style="width:75%">
          </el-input>
        </el-form-item>
        <el-form-item prop="expSn" label="">
          <el-input v-model="newform.expSn" placeholder="" style="width:75%">
          </el-input>
        </el-form-item>
        <el-form-item label='' prop="groupName">
          <el-select v-model="newform.groupName" placeholder="" style="width:75%" @change="newSelectGroup($event)">
            <el-option
              v-for="item in groupOptions"
              :key="item.groupId"
              :label="item.groupName"
              :value="item.groupId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="subGroupName">
          <el-select v-model="newform.subGroupName" placeholder="" style="width:75%"
                     @change="newSelectSubGroup($event)">
            <el-option
              v-for="item in subGroupOptions"
              :key="item.subGroupId"
              :label="item.subGroupName"
              :value="item.subGroupId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="expvmDifficulty">
          <el-rate v-model="newform.expvmDifficulty" :max="5" style="line-height: 2;"></el-rate>
        </el-form-item>
        <el-form-item label="" prop="expvmInstruction">
          <el-upload
            class="upload-demo"
            drag
            ref="uploadhtml"
            :action="upload_url"
            :auto-upload="false"
            :before-upload="newHtml"
            accept=".html, .htm">
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">实验信息上传，只能传(.html/.htm)文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="" prop="expvmFiles">
          <el-upload
            class="upload-demo"
            drag
            ref="uploadfile"
            :action="upload_url"
            :auto-upload="false"
            :before-upload="newFiles"
            multiple>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">实验信息附件上传，只能传(.file)文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="" prop="expvmVideo">
          <el-upload
            class="upload-demo"
            drag
            ref="uploadvideo"
            :action="upload_url"
            :auto-upload="false"
            :before-upload="newVideo"
            accept=".mp4">
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">实验视频上传，只能传(.mp4)文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="newSubmitForm()" class="yes-btn">
            确 定
          </el-button>
          <el-button @click="resetForm('newform')">
            重 置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import DateUtil from '../common/DateUtil'
  export default {
    name: "ModelManager",
    comments:{DateUtil},
    data() {
      return {
        tableData: [],
        search: '',
        typeMap: {
          suggesting: '推荐',
          culture_art: '文化艺术',
          animal_plants: '动物植物',
          life_education: '生活教育',
          industrial_treatment: '工业医疗',
          aeronautics_astronautics: '航空航天',
          game_electronics: '游戏电子',
          other: '其他'
        },
        dialogAddFormVisible: false,//新增对话框开关
        dialogFormVisible: false,//编辑对话框开关
        currentRowIndex: 0,//操作行索引
        formData: {
          fileName: '',
          type: ''
        },
        editFormRules: {
          name: [
            {required: true, message: '请输入模型名称', trigger: 'blur'}
          ]
        },

        upload_url: 'aaa',       // 随便填一个，但一定要有
        uploadForm: new FormData(),   // 一个formdata
        rules: {},     // 用到的规则
        newform: {
          expName: '',
          groupName: '',
          expSn: '',
          subGroupName: '',
          expvmDifficulty: 1
        }

      }
    },
    mounted: function () {
      this.initData();
    },
    methods: {
      initData() {
        let self = this
        this.$axios.get("/app/v1/model/list/1/20", {
          params: {'key': 'value'}
        }).then(function (response) {
          self.tableData = response.data.pageInfos;
          // alert('sd'.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
        }).catch(function (error) {
          let tmpData = {
            "id": "a24b467b-64bf-409d-9681-0e2669a4b481",
            "userId": null,
            "type": "suggesting",
            "author": null,
            "fileName": "Seahorse-pair.stl",
            "fileSize": "4.78MB",
            "imageId": "/image/08c380fdba8f488ab0ed4153274cf39e-image.png",
            "mainViewId": "/image/08c380fdba8f488ab0ed4153274cf39e-main.png",
            "sideViewId": "/image/08c380fdba8f488ab0ed4153274cf39e-side.png",
            "overViewId": "/image/08c380fdba8f488ab0ed4153274cf39e-over.png",
            "createTime": 1554341589000
          }
          for (let i = 0; i < 10; i++) {
            self.tableData.push(tmpData)
          }
        });
      },
      handleEdit(index, row) {
        this.currentRowIndex = index
        this.dialogFormVisible = true
        this.formData.fileName = row.fileName
        this.formData.type = row.type
      },
      editConfirm() {
        debugger
        this.dialogFormVisible = false
        this.tableData[this.currentRowIndex].fileName = this.formData.fileName
        this.tableData[this.currentRowIndex].type = this.formData.type
      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      formatDate: DateUtil.formatDate,
      formatType: function (row, column) {
        return this.typeMap[row.type]
      },
      handleChange(file, fileList) {
        this.fileList = this.fileList.slice(-3);
      }
    }
  }
</script>

<style scoped>
  #model-manager {
    margin: 20px 20px;
    box-sizing: border-box;
  }

  #option {
    text-align: left;
    margin-bottom: 2px;
  }

  .el-table a {
    color: crimson;
    text-decoration: none;
  }
</style>
